import React, {useState,} from "react"
import {Icon} from "antd-mobile"

import GoBackLayout from "../../../../layouts/GoBackLayout/GoBackLayout"
import ConsultButton from "../ConsultButton/ConsultButton"

const AccountIssue = props => {

    const list = [
        {
            Q: '为什么我的账号被封禁？',
            A: '若违反留言规范条例，将进行封禁处理；若需申诉，请联系客服，并提供昵称或者UID,绑定的手机或者邮箱。',
            show: false,
        },
        {
            Q: '如何更换手机号码？',
            A: '若违反留言规范条例，将进行封禁处理；若需申诉，请联系客服，并提供昵称或者UID,绑定的手机或者邮箱。',
            show: false,
        },
        {
            Q: '充值未到账怎么办？',
            A: '若违反留言规范条例，将进行封禁处理；若需申诉，请联系客服，并提供昵称或者UID,绑定的手机或者邮箱。',
            show: false,
        },
        {
            Q: '为什么我的提现还没有到账？',
            A: '若违反留言规范条例，将进行封禁处理；若需申诉，请联系客服，并提供昵称或者UID,绑定的手机或者邮箱。',
            show: false,
        },
    ]

    const [QAList, setQAList,] = useState(list)

    const toggleA = index => {
        // console.log(index)
        const l = [...QAList]
        l[index].show = !l[index].show
        setQAList(l)
    }

    const Container = {
        backgroundColor: '#fff',
    }

    const QAContainer = {
        borderBottom: '1px solid rgb(248,248,248)',
        margin: '0 18px'
    }
    const QContainerStyle = {
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: '18px 0',
    }

    const AContainerStyle = {
        backgroundColor: '#fff',
        padding: '0 18px 18px 18px',
    }

    const AStyle = {
        backgroundColor: 'rgb(248,248,248)',
        padding: '8px 16px',
    }

    const QAListTemplate = (
        <div style={Container}>
            {
                QAList.map((QA, index) => (
                    <div style={QAContainer} key={QA.Q}>
                        <div style={QContainerStyle}>
                            <div>{QA.Q}</div>
                            <Icon
                                onClick={() => toggleA(index)}
                                type='down'
                            />
                        </div>
                        {QA.show ?
                            <div style={AContainerStyle}>
                                <div style={AStyle}>
                                    {QA.A}
                                </div>
                            </div>
                            : null
                        }
                    </div>
                ))
            }
        </div>
    )

    return(
        <GoBackLayout
            history={props.history}
            title='账号问题'
        >
            {QAListTemplate}
            <ConsultButton/>
        </GoBackLayout>
    )
}

export default AccountIssue
